<template>
  
  <div class="ding">
    <img
      src="../data/img/微信截图_20230508092150.png"
      alt=""
      class="left-img"
    />
    <form class="xiala1">
      <select class="xiala">
        <option>自贡</option>
        <option>眉山</option>
        <option>成都</option>
        <option>巴中</option>
      </select>
    </form>
    <img src="../data/img/shuaxin.png" alt="" class="right-img" />
  </div>
  <div class="rili">
    <el-calendar :range="['2023-05-18', '2023-05-26']">
</el-calendar>
  </div>
  <div
    class="ma"
    id="main"
    style="width: 100%; height: 292px; background: rgba(255, 255, 255, 0.4)"
  ></div>
  <div class="kcal">
    <div class="grid-content1">
      <h1>8h24</h1>
      <p>m</p>
    </div>
    <div class="grid-content2">
      <h1>436l</h1>
      <p>kcal</p>
    </div>
    <div class="grid-content3">
      <h1>15.1</h1>
      <p>km</p>
    </div>
  </div>
  <div class="kcal2">
    <div class="grid-content1">
      <h4>时长</h4>
    </div>
    <div class="grid-content2">
      <h4>消耗</h4>
    </div>
    <div class="grid-content3">
      <h4>里程</h4>
    </div>
  </div>
  <div class="huadon">
    <div class="kuang" id="root">
      <div
        class="pink"
        id="qw"
        style="background-color: rgba(255, 192, 203, 0.519)"
      ></div>
      <div class="huadon1" @click="hd">活动</div>
      <div class="huadong2" @click="hd2">休息</div>
    </div>
  </div>
  <div class="dingwei">
    <p></p>
  </div>
</template>

<script >
import MapLoader from "@/unti/unti";
import * as echarts from "echarts";
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
export default {
  name: "data",
  setup(){
    let arr= reactive({
      info:[]
    })
const data = reactive({
  searchValue:''
})
const {ctx} = getCurrentInstance();
onMounted(()=>{
 localStorage.getItem('data')
 

  lookMap()
})
//定位
let lookMap = () =>{
  MapLoader()
  
}

return{
  ...toRefs(data),
  arr,
  
}
  },
  data() {
    return {
      drawer: false,
      charts: "",
      opinionData: [], //数据
    };
  },

  methods: {
    hd() {
      document.querySelector("#qw").style.left="60px"
    },
    hd2() {
      document.querySelector("#qw").style.left="0px"
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },

        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          data: [
            "",
            "0:00",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "12:00",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "24:00",
            "",
          ], //x坐标的名称
        },
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitNumber: 4, //纵坐标数
          interval: 0, //强制设置坐标轴分割间隔
        },

        series: [
          {
            data: [
              120, 200, 150, 80, 70, 110, 600, 450, 500, 800, 900, 1000, 800,
              600, 300, 700, 800, 600, 300, 700, 200, 150, 80, 70,
            ],
            type: "bar",
            barWidth: 5,
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 0, 0], // 加圆角 对应（顺时针左上，右上，右下，左下）
                // 这里的color指的是每个颜色的回调函数
                color: function (params) {
                  console.log("颜色参数", params); //这里我们有七个柱状图，七份数据，所以会打印7次。
                  // params.dataIndex指的是每个柱状图的索引下标 分别为0 1 2 3 4 5 6 7 8 9
                  var colorArr = ["#FF8C00", "#00FF00", "#DC143C"]; //colorArr.length 为3，通过取模的方式就可以循环使用颜色了
                  return colorArr[params.dataIndex % colorArr.length];
                },
              },
            },
            showBackground: false,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },

  // updated: function () {
  //     this.drawCharts()
  // }

  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
};
</script>


<style land="less"  scoped>
.dingwei{
  height: 110px;
  width: 100%
}
.pink {
  width: 50%;
  height: 25px;
  border-radius: 15px;
  position: absolute;
  pointer-events: none;
  transition: all  0.5s ease;
}
.huadon {
  padding-top: 0.625rem;
  width: 100%;
  height: 100px;
  display: flex;
}
.kuang {
  border: 1px solid #ddd;
  border-radius: 15px;
  display: flex;
  margin: auto;
  position: relative;
}
.huadon1 {
  text-align: center;
  border-radius: 15px;
  width: 3.75rem;
  height: 1.5625rem;
}
.huadong2 {
  text-align: center;
  border-radius: 15px;
  width: 3.75rem;
  height: 1.5625rem;
}
.xiala {
  width: 4.9rem;
  height: 2.875rem;
  text-align: center;
}
.xiala1 {
  width: 4.9rem;
  height: 2.875rem;
  margin: 0 auto;
}
.ding {
  width: 100%;
  height: 4.5rem;
  display: flex;
}
.left-img {
  width: 3.125rem;
  height: 3.125rem;
}
.right-img {
  width: 3.125rem;
  height: 3.125rem;
  float: right;
}
.grid-content {
  padding: 0 auto;
  display: flex;
}
.kcal {
  width: 100%;
  display: flex;
}

.grid-content1 {
  display: flex;
}
.grid-content2 {
  margin: 0 auto;
  display: flex;
}
.grid-content3 {
  display: flex;
}
.kcal2 {
  width: 100%;
  display: flex;
}
</style>

